<!-- 学生个人中心 -->

<template>
  <div class="main" style="box-sizing: border-box">
    <div style="height: 100%">
      <el-card class="box" style="width: 900px;height: 80%;margin: 80px 520px;position: fixed">

        <div style="float: left">
          <label id="back" @click="$router.push('/System_StuExam')">
            <i class="el-icon-back"></i>
            <span>返回</span>
          </label>
        </div>

        <p style="text-align: center;font-size: 25px">个人信息</p>
        <hr style="margin-bottom: 50px;">
        <div style="width: 80%;margin:0 auto">
          <el-form label-position="left" label-width="90px" :model="form">
            <el-form-item label="用户名：">
              <span>{{ form.username }}</span>
              <span style="float: right">注册时间: <span style="color: #ff0000">{{
                  dateFormat(form.createTime)
                }}</span></span>
            </el-form-item>
            <el-form-item label="昵称：">
              <el-input :disabled="isDisabled" v-model="form.nickname" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input :disabled="isDisabled" v-model="form.email" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话：">
              <el-input :disabled="isDisabled" v-model="form.phone" clearable></el-input>
            </el-form-item>
            <el-form-item label="地址：">
              <el-input :disabled="isDisabled" v-model="form.address" clearable></el-input>
            </el-form-item>
            <el-form-item label="个性签名：">
              <el-input
                  v-model="form.signature"
                  type="textarea"
                  autosize
                  placeholder="这个人很懒，什么也没有留下......"
                  :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div style="text-align: center">
          <el-button @click="edit" type="success" :disabled="Btn1_isDisabled">编辑</el-button>
          <el-button @click="Ok" type="primary" :disabled="Btn2_isDisabled">确定</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Stu_PersonalCenter",
  data() {
    return {
      isDisabled: true,
      Btn1_isDisabled: false,
      Btn2_isDisabled: true,
      form: {},
      Student: localStorage.getItem("Student") ? JSON.parse(localStorage.getItem("Student")) : {}
    }
  },
  created() {
    this.request.get("/student/studentName/" + this.Student.username).then(res => {
      if (res.code === "code_200") {
        this.form = res.data
      }
    })
  },
  methods: {
    edit() {
      this.isDisabled = !this.isDisabled
      this.Btn1_isDisabled = true
      this.Btn2_isDisabled = false
    },
    Ok() {
      this.request.post("/student/upDataInfo" , this.form).then(res => {
        if (res.code === "code_200") {
          this.$message.success("编辑成功！")
          this.location.reload()
        } else {
          this.$message.error("编辑失败！")
        }
      })
      this.isDisabled = !this.isDisabled
      this.Btn1_isDisabled = false
      this.Btn2_isDisabled = true
    },
    dateFormat: function (time) {
      // 格式化日期
      let date = new Date(new Date(time).getTime());
      let year = date.getFullYear();
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
  }
}
</script>

<style scoped>
.main {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: url('../assets/02.jpg');
  background-size: cover;
}

.box{
  background-image: url('../assets/03.jpg');
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.8);
}

.el-button{
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
}

#back:hover {
  color: #27a5ff;
}
</style>